<template>
  <div>
    <div class="container">
      <div class="login-form">
        <h1 class="h1">系统注册</h1>
        <div  class="input-group">
          <div class="label">用户名</div>
          <div class="input-container">
            <input
              v-model="ruleForm.userName"
              class="input"
              type="text"
              placeholder="用户名"
            />
          </div>
        </div>
        <div  class="input-group">
          <div class="label">昵称</div>
          <div class="input-container">
            <input
              v-model="ruleForm.nickName"
              class="input"
              type="text"
              placeholder="昵称"
            />
          </div>
        </div>
        <div  class="input-group">
          <div class="label">密码</div>
          <div class="input-container">
            <input
              v-model="ruleForm.password"
              class="input"
              type="password"
              placeholder="密码"
            />
          </div>
        </div>
        <div  class="input-group">
          <div class="label">确认密码</div>
          <div class="input-container">
            <input
              v-model="ruleForm.remima"
              class="input"
              type="password"
              placeholder="确认密码"
            />
          </div>
        </div>
        <div  class="input-group">
          <div class="label">手机</div>
          <div class="input-container">
            <input
              v-model="ruleForm.phonenumber"
              class="input"
              type="text"
              placeholder="手机"
            />
          </div>
        </div>
    
      </div>
      <div class="nk-navigation">
        <a href="#">
            
          <div @click="login()">注册</div>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
import { reg } from "@/api/login";
export default {
  data() {
    return {
      ruleForm: {},
      tableName: "",
      rules: {},
    };
  },
  mounted() {
 
  },
  methods: {
   
    // 注册
    login() {
      if (!this.ruleForm.userName ) {
        this.$message.error(`用户名不能为空`);
        return;
      }
      if (!this.ruleForm.password   ) {
        this.$message.error(`密码不能为空`);
        return;
      }
      if (this.ruleForm.password.length < 8 ) {
        this.$message.error(`密码最少八位`);
        return;
      }
       if ( this.ruleForm.password !=this.ruleForm.remima ) {
        this.$message.error(`两次密码不匹配`);
        return;
      }
      if (!this.ruleForm.nickName  ) {
        this.$message.error(`姓名不能为空`);
        return;
      }
       if (!this.ruleForm.phonenumber  ) {
        this.$message.error(`手机号不能为空`);
        return;
      }
      if (
       
        this.ruleForm.phonenumber &&
        this.ruleForm.phonenumber.length != 11
      ) {
        this.$message.error(`手机应输入11位`);
        return;
      }
   
      reg(this.ruleForm).then(data => {
          console.log(data)
        if (data.code === 200) {
          this.$message({
            message: "注册成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.$router.replace({ path: "/login" });
            },
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-radio__input.is-checked .el-radio__inner {
  border-color: #00c292;
  background: #00c292;
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: #00c292;
  background: #00c292;
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: #00c292;
  background: #00c292;
}

.el-radio__input.is-checked + .el-radio__label {
  color: #00c292;
}

.el-radio__input.is-checked + .el-radio__label {
  color: #00c292;
}

.el-radio__input.is-checked + .el-radio__label {
  color: #00c292;
}

.h1 {
  margin-top: 10px;
}

body {
  padding: 0;
  margin: 0;
}

.container {
  min-height: 100vh;
  text-align: center;
  // background-color: #00c292;
  padding-top: 20vh;
  background-image: url(../assets/image/login-background.jpg);
  background-size: 100% 100%;
  opacity: 0.9;
}

.login-form:before {
  vertical-align: middle;
  display: inline-block;
}

.login-form {
  max-width: 500px;
  padding: 20px 0;
  width: 80%;
  position: relative;
  margin: 0 auto;

  .label {
    min-width: 60px;
  }

  .input-group {
    max-width: 500px;
    padding: 20px 0;
    width: 80%;
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items: center;

    .input-container {
      display: inline-block;
      width: 100%;
      text-align: left;
      margin-left: 10px;
    }

    .icon {
      width: 30px;
      height: 30px;
    }

    .input {
      position: relative;
      z-index: 2;
      float: left;
      width: 100%;
      margin-bottom: 0;
      box-shadow: none;
      border-top: 0px solid #ccc;
      border-left: 0px solid #ccc;
      border-right: 0px solid #ccc;
      border-bottom: 1px solid #ccc;
      padding: 0px;
      resize: none;
      border-radius: 0px;
      display: block;
      width: 100%;
      height: 34px;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff;
    }
  }
}

.nk-navigation {
  margin-top: 15px;

  a {
    display: inline-block;
    color: #fff;
    width: 100px;
    height: 50px;
    border-radius: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: center;
    padding: 0 20px;
        background: #1b4c96;
  }

  .icon {
    margin-left: 10px;
    width: 30px;
    height: 30px;
  }
}

.register-container {
  margin-top: 10px;

  a {
    display: inline-block;
    color: #fff;
    max-width: 500px;
    height: 50px;
    border-radius: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: center;
    padding: 0 20px;

    div {
      margin-left: 10px;
    }
  }
}
</style>
